<template>
  <div class="map-container" ref="mapContainer"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'

const props = defineProps({
  center: {
    type: Array,
    default: () => [116.397428, 39.90923]
  },
  zoom: {
    type: Number,
    default: 13
  }
})

const mapContainer = ref(null)

onMounted(() => {
  // 设置安全配置
  window._AMapSecurityConfig = {
    securityJsCode: 'dd5f8229f90062eef530f238093f0f0e'
  }
  
  AMapLoader.load({
    key: '20043a52000d4a5ba4ac9d73c3f097d0',
    version: '2.0',
    plugins: ['AMap.ToolBar', 'AMap.Scale']
  }).then((AMap) => {
    const map = new AMap.Map(mapContainer.value, {
      zoom: props.zoom,
      center: props.center,
      viewMode: '2D',
      resizeEnable: true
    })
    
    // 添加工具条和比例尺
    map.addControl(new AMap.ToolBar())
    map.addControl(new AMap.Scale())
  }).catch(e => {
    console.error('高德地图加载失败：', e)
  })
})
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 400px;
}
</style> 